<template>
  <div>
    <Adminheader :panelChange='panelChange' />

    <div class="board">
      <panelLeft :showChange='showChange' :panelShow='panelShow' />

      <div class="panel_right" ref="panel_right">

        <setTitle class="item" v-drag:panelShow="panelShow" v-show="showManager.title" :showChange='showChange' :setChange='setChange' />
        <setIcp class="item" v-drag:panelShow="panelShow" v-show="showManager.icp" :showChange='showChange' :setChange='setChange' />
        <setPush class="item" v-drag:panelShow="panelShow" v-show="showManager.push" :showChange='showChange' :setChange='setChange' />
        <setCount class="item" v-drag:panelShow="panelShow" v-show="showManager.count" :showChange='showChange' :setChange='setChange' />
        <setNavTops class="item" v-drag:panelShow="panelShow" v-show="showManager.navTops" :showChange='showChange' :setChange='setChange' />

        <contentManager class="item" v-drag:panelShow="panelShow" v-show="showManager.content" :showChange='showChange' :setChange='setChange' />

      </div>
    </div>
  </div>
</template>

<script>
import cookie from 'js-cookie'
import { async } from 'q'

import panelLeft from '~/components/admin/panelLeft.vue'
import Adminheader from '~/components/admin/header.vue'
import setTitle from '~/components/admin/setTitle.vue'
import setIcp from '~/components/admin/setIcp.vue'
import setPush from '~/components/admin/setPush.vue'
import setCount from '~/components/admin/setCount.vue'
import setNavTops from '~/components/admin/setNavTops.vue'
import contentManager from '~/components/admin/contentManager.vue'

export default {
  layout: 'admin',
  data() {
    return {
      panelShow: true,
      showManager: {
        title: false,
        count: false,
        push: false,
        icp: false,
        navTops: false,
        content:false
      },
      
    }
  },
  components: {
    panelLeft,Adminheader,setTitle,setIcp,setPush,setCount,setNavTops,contentManager
  },
  computed: {
    token: function() {
      return cookie.get('token')
    },
  },
  methods: {
    panelChange: function() {
      this.panelShow = !this.panelShow
      this.$refs.panel_right.style.width = '100%'
    },
    showChange: function(str) {
      this.showManager[str] = !this.showManager[str]
    },
    setChange: async function(url, param) {
      let result = await this.$axios.put(url, param)
      if (result.data.code == 200) {
        this.$Message.info({
          content: result.data.message,
          duretion: 5
        })
      } else {
        this.$Message.warning({
          content: result.data.message,
          duretion: 5
        })
      }
    }
  },
  mounted() {
    if (!this.token) {
      this.$Message.error('未授权，请重新登陆！')
      setTimeout(() => {
        this.$router.push({ path: '/admin' })
      }, 1500)
    }

    this.$refs.panel_right.style.height = `${document
      .documentElement.clientHeight - document.querySelector('.header').offsetHeight}px`
    this.$refs.panel_right.style.width = `${document.documentElement
      .clientWidth - 200}px`
  },
  directives: {
    drag(el, bindings) {
      el.onmousedown = e => {
        let disx = e.clientX - el.offsetLeft
        let disy = e.clientY - el.offsetTop
        let elInfo = el.getBoundingClientRect()
        let elw = elInfo.width
        let elh = elInfo.height
        let clientHeight = document.documentElement.clientHeight
        let clientWidth = document.documentElement.clientWidth
        let panelWidth = bindings.value ? 200 : 0
        document.onmousemove = ev => {
          let left = ev.clientX - disx < 0 ? 0 : ev.clientX - disx
          left =
            left > clientWidth - panelWidth - elw
              ? clientWidth - panelWidth - elw
              : left
          let top = ev.clientY - disy < 0 ? 0 : ev.clientY - disy
          top = top > clientHeight - 60 - elh ? clientHeight - 60 - elh : top
          el.style.left = left + 'px'
          el.style.top = top + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
.board {
  display: flex;
}

.panel_right {
  overflow: hidden;
  position: relative;
  .item {
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
    .ivu-card {
      min-width: 200px;
      min-height: 150px;
      padding-bottom: 35px;
    }
    .close {
      cursor: pointer;
    }
    button {
      margin: 10px 0;
      position: absolute;
      right: 15px;
      bottom: 0px;
    }
  }
}
</style>
